<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的班级</title>
  <link rel="icon" href="image/网页图标.png" type="image/x-icon">
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <script src="js/top.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <script  src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.qqFace.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
    }
    .class-list, .joined-classes {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .class-list h2, .joined-classes h2 {
      margin-top: 0;
    }
    .class-item, .joined-class-item {
      margin: 5px 0;
      padding: 5px;
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .create-class-btn {
      display: block;
      width: 100%;
      max-width: 200px;
      margin: 20px auto;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      text-decoration: none;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .create-class-btn:hover {
      background-color: #45a049;
    }
    *{
      padding: 0;
      margin: 0;
    }
    html, body, #app {
      width: 100%;
      height: 100%;
      font-size: 14px;
    }
    .el-container{
      width: 100%;
      height: 100%;
    }
    .el-header{
      width: 100%;
      padding: 0%;
    }

    /* 卡片 */
    .c1{
      width: 100%;
      height: 100%;
      font-size: 35px;
    }

    /* 弹出 */
    .d1{
      width: 200px;
      height: 400px;
      position: absolute;
      z-index: 100;
      left: 10%;
    }

    /* 浮动 */
    .f{
      float: left;
    }
    .r{
      float: right;
    }

    .i1{
      position: relative;
      top: -15px;
    }

    .p1{
      margin: 8px 10px 0 10px;
      text-decoration: none;
      color: #333333;
    }
    .user{
      float: right;
      position: relative;
      left: -40px;
      top: 15px;
    }
    .leftall{
      width: 20%;
      height: 100%;
    }
    .rightall{
      width: 80%;
      height: 100%;
        position: relative;
    }
    .lefttop{
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      background-color: #d3dce6;
    }
    .leftbottom{
      width: 100%;
      height: 90%;
      background-color: #f0f0f0; /* 设置背景色 */
      border-right: 1px solid #ccc; /* 可选，添加右边框以分隔内容 */
      overflow-y: auto; /* 允许垂直滚动，如果内容超出视口高度 */
      position: relative; /* 设置相对定位，以便子元素可以使用绝对定位 */
    }
    .righttop{
      width: 100%;
      height: 10%;
      background-color: #B2D0EA;
      display: flex;
      align-items: center; /* 垂直居中 */
      border: 1px solid #ccc; /* 可选，添加边框 */
    }
    .rightbottom{
      width: 85%;
      height: 90%;
      display: flex;
      flex-direction: column; /* 使用列方向布局 */
      background-color: #fff; /* 设置背景色 */
      padding: 10px; /* 内边距 */
      box-sizing: border-box; /* 包含内边距和边框在宽度内 */
      overflow-y: auto; /* 允许垂直滚动，如果内容超出视口高度 */
    }
    .mydrawer{
      width: 100%;
      height: 100%;
    }
    .student{
        width: 15%;
        height: 90%;
    }
    /*去除upload组件过渡效果*/
    .el-upload-list__item {
        transition: none !important;
    }
  </style>
</head>
<body>

<div id="app">
  <el-container>
    <!-- 头部 -->
    <el-header height="12%">
      <top @getuser="user">
      </top>
    </el-header>
    <!-- 身体 -->
    <el-main>
<!--      左侧界面-->
      <div class="leftall f">
<!--        班级查询-->
        <div class="lefttop">
          <el-input v-model="searchQuery" placeholder="请输入搜索内容" class="search-input"></el-input>
          <el-button type="primary" class="search-button" @click="getclass">查询</el-button>
        </div>
<!--        班级显示与聊天跳转-->
        <div class="leftbottom">
          <div class="chat-list">

            <div class="chat-item" data-online="true" v-for="c in classinfo" @click="getselect(c)">
              <img :src="c.image" alt="Avatar" class="chat-avatar">
              <div class="chat-info">
                <span class="chat-name">{{c.cname}}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
<!--      右侧界面-->
      <div class="rightall f">
<!--        班级名称与人数显示，右侧侧栏弹出按钮-->
        <div class="righttop">
          <div class="class-info">
            <span class="class-name">{{selectone.cname}} ({{getnum()}})</span>
          </div>
          <button class="more-options" @click="updatecart">...</button>
        </div>
<!--        聊天界面-->
        <div class="rightbottom f">
          <!-- 聊天内容区域 -->
            <div class="chat-content" ref="chatContent">
                <div class="chat-message" v-for="m in msgs" :class="{recv: uid!=m.id, send: uid==m.id}">
                    <img :src="m.pic" alt="联系人A的头像" class="chat-avatar">

                    <div class="chat-text" v-if="m.msg.startsWith('examination: ')">
                        <div class="exam-container">
                            <div class="exam" id="exam-card">
                                <div class="exam-header">
                                    <h2>考试通知</h2>
                                </div>
                                <div class="exam-content">
                                    <p>您有一场考试即将开始，请点击参加或查看排行</p>
                                </div>
                                <div class="exam-footer">
                                    <!-- 参加按钮 -->
                                    <button class="exam-button" @click="getexammax(m.msg.split(' ')[1])" style="margin-bottom: 10px">参加</button>
                                    <!-- 查看排行按钮 -->
                                    <button class="exam-button" @click="viewRankings(m.msg.split(' ')[1])">查看排行</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="chat-text" v-else-if="m.msg.indexOf('file:') == 0" @click="openbigpic(m.msg.substring(5))"><img :src="m.msg.substring(5)"
                              style="max-height: 200px; max-width: 200px; object-fit: cover"></div>
                    <div class="chat-text" v-else-if="m.msg.includes('<img src=')" v-html="m.msg"></div>
                    <div class="chat-text" v-else>{{m.sayname}}: {{m.msg}}</div>
                </div>
            </div>

            <el-dialog :visible.sync="bigpic" width="50%">
                <img :src="bigimage" style="width: 80%; height: 80%; display: block;" alt="预览图">
            </el-dialog>


          <!-- 特色功能区域 -->
          <div class="special-features">
              <span class="emotion" @click="showEmotion">表情</span></p>
            <button class="feature-button" v-if="status === 2" @click="getPaperOpen">发起考试</button>
            <!-- 可以继续添加更多的特色功能按钮 -->
          </div>

          <!-- 聊天输入区域 -->
          <div class="chat-input">
            <textarea class="input-field" placeholder="输入你的消息..." id="msg" name="msg" v-model="msg" @paste="sendImage"></textarea>
            <button class="send-button" @click="send">发送</button>
          </div>

        </div>

          <div class="student f">
              <div class="chat-list" style="max-height: 100%;overflow-y: auto;">

                  <div class="chat-item" v-for="(member, index) in groupMembers.classobj">
                      <img :src="member.image" alt="Avatar" class="chat-avatar">
                      <div class="chat-info">
                          <span class="chat-name">{{ member.sayname }}</span>
                          <span class="chat-status online" v-if="isUserOnline(member.uid)">在线</span>
                          <span class="chat-status offline" v-else>离线</span>
                      </div>
                  </div>

              </div>
          </div>

          <el-drawer
                  title="我是标题"
                  :visible.sync="drawer"
                  :with-header="false"
                  style="position: absolute;">
              <div class="mydrawer">
                  <!--              侧栏内容编辑-->
                  <div class="card">
                      <div class="card-avatar">
                          <!-- 这里可以放置头像图片，例如使用img标签或背景图片 -->
                          <img :src="selectone.image" alt="群头像" @click="updateimage"/>
                      </div>
                      <div class="card-content">
                          <h3 class="card-title">{{selectone.cname}}</h3>
                          <p class="card-invite-code">邀请码：{{selectone.num}}</p>
                          <!-- 可以添加更多信息 -->
                      </div>
                  </div>

                  <div class="updatecname">
                      <!-- 根据用户状态显示不同的内容 -->
                      <div v-if="status === 2" class="editable-group-name">
                          <!-- 输入框，用于编辑群名称 -->
                          班级名称：<input
                              type="text"
                              v-model="groupName"
                              placeholder="请输入群名称"
                              class="group-name-input"
                      />
                          <button class="change-button" @click="updateClassName">更改</button>
                      </div>
                      <div v-else class="editable-group-name">
                          班级名称：<el-input
                              placeholder="请输入内容"
                              v-model="groupName"
                              :disabled="true"
                              class="group-name-input"
                              style="padding: 0px">
                      </el-input>
                          <el-button class="change-button" disabled type="primary">更改</el-button>
                      </div>
                  </div>

                  <div class="updatecname">
                      <div class="editable-group-name">
                          <!-- 输入框，用于编辑群名称 -->
                          班级昵称：<input
                              type="text"
                              v-model="sayname"
                              placeholder="请输入群名称"
                              class="group-name-input"
                      />
                          <button class="change-button" @click="updateSayName">更改</button>
                      </div>
                  </div>

                  <div class="group-members-container" style="margin-top: 20px" v-if="status === 2 && audit.classobj != null">
                      <div v-for="(member, index) in audit.classobj" :key="index" class="group-member">
                          <div class="member-info">
                              <img :src="member.image" alt="成员头像" class="member-avatar" />
                              <span class="member-name">{{ member.sayname }}</span>
                          </div>
                          <div class="member-actions">
                              <el-tag v-if="member.status === 0">审核中</el-tag>
                              <el-tag v-if="member.status === -1" type="danger">未通过</el-tag>
                              <el-button type="success" @click="passOrNpass(member.id, member.uid, 1)">通过</el-button>
                              <el-button type="danger" @click="passOrNpass(member.id, member.uid, -1)" v-if="member.status === 0">拒绝</el-button>
                          </div>
                      </div>
                  </div>

<!--                  成员管理-->
                  <div class="cardexit" v-if="status === 2">
                      <button class="send-button" @click="openClass">成员管理</button>
                  </div>

<!--                  退出群聊-->
                  <div class="cardexit">
                      <button class="send-button send-button-disband" v-if="status === 2" @click="exitAll">解散群聊</button>
                      <button class="send-button send-button-leave" v-else @click="exitOne">退出群聊</button>
                  </div>

              </div>
          </el-drawer>

      </div>
    </el-main>
  </el-container>

    <el-dialog
            title="修改信息"
            :visible.sync="dialogVisible1"
            width="30%">
        <el-form class="dialog-content">
            <!-- 头像上传区域 -->
            <!--      图片-->
            <el-form-item label="班级头像">
                <!--      图片-->
                <el-upload
                        class="upload-demo"
                        action="cloud-other/review/upload"
                        :on-change="handleChange"
                        :file-list="fileList"
                        :auto-upload="true"
                        :on-success="upyes"
                        :before-remove="handleRemove"
                        :on-error="upno"
                        list-type="picture"
                        :limit="1">
                    <i slot="trigger" class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2" width="30%">
                    <img :src="dialogImageUrl" style="width: 100%; display: block;" alt="预览图">
                </el-dialog>

            </el-form-item>
        </el-form>

        <!-- 弹窗底部操作按钮 -->
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateClassImage">确 定</el-button>
      </span>
    </el-dialog>

<!--    成员管理弹窗-->
    <el-dialog title="成员管理" :visible.sync="manage">
<!--        成员显示-->
        <div class="group-members-container" style="margin-top: 20px" v-if="status === 2 && audit.classobj != null">
            <div v-for="(member, index) in groupMembers?.classobj" v-if="member.uid != uid" style="border: 1px solid black;padding: 4px;border-radius: 8px;" :key="index" class="group-member">
                <div class="member-info">
                    <img :src="member.image" alt="成员头像" class="member-avatar" />
                    <span class="member-name">{{ member.sayname }}</span>
                </div>
                <div class="member-actions">
                    <el-button type="success" @click="removeOne(member)">移除群聊</el-button>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="manage = false">取 消</el-button>
        </div>
    </el-dialog>

    <!--  选择试卷-->
    <el-dialog title="发布考试" :visible.sync="papers">
        <div style="max-height: 400px;overflow-y: auto;" >
            <el-card
                    v-for="p in paper"
                    style="margin-bottom: 8px;"
                    :class="{ 'paper': paperOne.id === p.id, 'blue-background': paperOne.id === p.id }"
            >
                <div slot="header" class="flex" @click="paperOne = p">
                    <b>{{p.title}}</b>
                </div>
                <div class="grid4" style="grid-template-columns: 10% 30% 10% 40%" @click="paperOne = p">
                    <label>总分：</label><span style="margin-right: 100px">{{p.scoreTotal}}</span>
                    <label>考试时间：</label><span>{{new Date(p.begin).toLocaleString()}}~{{new Date(p.end).toLocaleString()}}</span>
                    <br/>
                    <br/>
                    <label>考试时长：</label><span>{{p.time}}分钟</span>
                </div>
            </el-card>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="papers = false">取 消</el-button>
            <el-button type="primary" @click="getPaper">发 送</el-button>
        </div>
    </el-dialog>

<!--    排行榜-->
    <el-dialog title="成绩排行榜" :visible.sync="phb" width="1000px">

        <div>
            <header>
                <h1 class="leaderboard__title">
                    <span class="leaderboard__title--top">{{paperone.title}}</span>
                </h1>
                <div style="font-size: 20px;margin-left: 100px">
                    <p>总分：{{paperone.scoreTotal}}</p>
                    <p>已参加人数：{{exams.length}}</p>
                </div>
            </header>
            <main class="leaderboard__profiles" style="max-height: 400px;overflow-y: auto;">
                <article class="leaderboard__profile" v-for="(exam, index) in exams" @click="getexamdetail(exam)">
                    <img :src="groupMembers.classobj.find(m => m.uid == exam.uid).image" alt="" class="leaderboard__picture">
                    <span class="leaderboard__name"><span style="color: black;font-size: 25px;font-weight: bold">{{index + 1}}</span><span style="margin-left: 100px">{{groupMembers.classobj.find(m => m.uid == exam.uid).sayname}}</span></span>
                    <span class="leaderboard__value">{{exam.score}}</span>
                </article>
            </main>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="phb = false">取 消</el-button>
        </div>
    </el-dialog>

</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      uid: null,
      cid: null,
      searchQuery: '',
      drawer: false,
      classinfo: {},
      selectone: {},
      status: 1,
      groupMembers: {},
      groupName: '默认群名称',
      sayname: '默认名称',
      audit: {},
      dialogVisible1: false,
        fileList: [
            {
                name: 'pic',
                url: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.mPGy-QSWMXym-J4zC_MJfwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2'
            }],
        dialogImageUrl: '',
        dialogVisible2: false,
        classPic: '',
        ws: null,
        onlines: [],
        msgs: [],
        msg: '',
        wsstatus: 0,
        manage: false,
        member: {},
        papers: false,
        paper: [],
        paperOne: {},
        sum: 0,
        phb: false,
        exams: [],
        paperone: {},
        pid: '',
        bigpic: false,
        bigimage: '',
        ws1: null
    },
    created() {
        this.getcid();
    },
    watch: {
      uid(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.getclass();
        }
      }
    },
    methods: {
      //组件自定义方法
      user(info) {
        this.uid = info.id;
      },
      //根据uid查询用户加入的班级
      getclass(){
        axios.get("cloud-other/classs/getclass?id=" + this.uid + "&search=" + this.searchQuery).then(res=>{
          if(res.data.code === 1){
            this.classinfo = res.data.data;
            //当没有班级非法进入的时候，返回班级界面
            if(this.classinfo.length === 0){
              location.href = "myclass.html";
            }
              if(this.sum === 0){
                  // 查找匹配的对象
                  const foundItem = this.classinfo.find(item => item.id == this.cid);
                  // 如果找到了匹配的对象，则赋值给this.selectone
                  // 否则，默认使用数组的第一个元素
                  this.selectone = foundItem || JSON.parse(JSON.stringify(this.classinfo[0]));
                  this.sum = this.sum + 1;
              }
              if(this.classinfo.find(item => item.id == this.selectone.id)){

              }
              if(this.classinfo.find(item => item.id == this.selectone.id) == null){
                  this.getselect(JSON.parse(JSON.stringify(this.classinfo[0])));
              }
              this.selectone = this.classinfo.find(item => item.id == this.selectone.id) || JSON.parse(JSON.stringify(this.classinfo[0]));
              if(this.selectone.uid === this.uid){
                  this.status = 2;
              }else{
                  this.status = 1;
              }
            this.getstudy();
          }
        });
      },
      //界面数据切换
      getselect(obj){
          if(this.selectone.id === obj.id){
              return;
          }
        this.selectone = JSON.parse(JSON.stringify(obj));
        this.getstudy();
          if(this.selectone.uid === this.uid){
              this.status = 2;
          }else{
              this.status = 1;
          }
        //切换班级
        this.onlines= [],
        this.msgs= [],
        this.msg= ''
          if(this.wsstatus === 1){
              this.sendClass(this.selectone.id);
          }
      },
      //打开侧栏内容
      updatecart(){
        //老师打开
        if(this.selectone.uid === this.uid){
          this.status = 2;
            this.says1();
        }else{
          this.status = 1;
        }
        //查询班级成员
        this.getaudit();
        //打开侧栏
        this.groupName = this.selectone.cname;
        this.sayname = this.groupMembers.classobj?.find(member => member.uid === this.uid).sayname;
        this.classPic = this.selectone.image;
        this.drawer = true;
      },
        //获取班级成员
      getstudy(){
        axios.get("cloud-other/createclass/getstudy?id=" + this.selectone.id).then(res=>{
          if(res.data.code === 1){
            this.groupMembers = res.data.data;
            if(this.wsstatus === 0){
                this.says();
                this.wsstatus = 1;
            }
            //查询添加
            this.getSayData();
          }
        });
      },
        //获取审核成员
        getaudit(){
            axios.get("cloud-other/createclass/getaudit?id=" + this.selectone.id).then(res=>{
                if(res.data.code === 1){
                    this.audit = res.data.data;
                }
            });
        },
        //更换群头像
        updateimage(){
          if(this.status === 2){
              //弹窗
              if(this.fileList.length === 0){
                  this.fileList = [
                      {
                          name: 'pic',
                          url: this.selectone.image
                      }]
              }
              if (this.fileList[0].name !== '班级头像' || this.fileList[0].url !== this.selectone.image) {
                  this.fileList[0] = {
                      name: '班级头像',
                      url: this.selectone.image
                  };
              }
              this.dialogVisible1 = true;
          }else{
              return;
          }
        },
        // 文件上传
        handleChange(file, fileList) {
            // 如果已经选择了文件，则不再允许添加新的文件
            this.fileList = fileList;
            if (this.fileList.length > 1) {
                this.$message.error('只能上传一张图片！');
                // 可以选择移除多余的文件
                this.fileList.splice(1);
            }
            // 如果文件列表中有文件，显示预览
            if (this.fileList.length > 0) {
                this.dialogImageUrl = this.fileList[0].raw ? URL.createObjectURL(this.fileList[0].raw) : this.fileList[0].url;
                this.dialogVisible2 = true;
            }
        },
        handleRemove(file, fileList) {
            // 移除文件并关闭预览
            this.fileList = fileList.filter(f => f.name !== file.name);
            this.dialogVisible2 = false;
        },
        //文件上传成功
        upyes(response){
            this.classPic = response.data;
        },
        //失败
        upno(err){
            alert("抱歉，请重新上传！");
        },

        //群聊
        says(){
            this.ws = new WebSocket("ws://127.0.0.1:8002/says/" + this.uid + "/" + this.selectone.id);
            this.ws.onopen = ()=>{
                console.info("服务器连接成功！");
            }
            this.ws.onclose = ()=>{
                console.info("服务器断开连接！");
            }
            this.ws.onmessage = (data)=>{
                let json = data.data;
                let msgInfo = JSON.parse(json);
                //判断是不是修改查询
                if(msgInfo.myInfo === null){
                    this.getaudit();
                    this.getclass();
                    return;
                }
                //存取数据
                if(msgInfo.onlines){
                    this.onlines = msgInfo.onlines;
                }
                //存消息
                if(this.selectone.id == msgInfo.myInfo.cid && msgInfo.message != ''){
                    this.msgs.push({
                        id: msgInfo.myInfo.id,
                        pic: msgInfo.myInfo.pic,
                        sayname: this.getsayname(msgInfo.myInfo.id),
                        msg: msgInfo.message
                    });
                    setTimeout(()=>{
                        this.scrollToBottom(); // 添加消息后调用此方法
                    }, 200);
                }
            }
        },
        //发送消息
        send(){
            var msg = document.getElementById("msg").value;
            this.msg = this.replace_em(msg);
            if(!this.msg){
                return;
            }
            let wssay = {
                type: "say",
                msg: this.msg
            }
            const jsonString = JSON.stringify(wssay);
            this.ws.send(jsonString);
            //开始存入数据库
            axios.get("cloud-user/chat/insayData", {
                params: {
                    cid: this.selectone.id,
                    uid: this.uid,
                    say: this.msg
                }
            }).then(res=>{
                if(res.data.code === -1){
                    this.$alert(res.data.msg);
                }
            });
            this.msg = "";
        },
        //切换班级消息
        sendClass(cid){
          let wssay = {
              type: "change class",
              msg: cid
          }
          const jsonString = JSON.stringify(wssay);
          this.ws.send(jsonString);
        },
        //判断在线情况
        isUserOnline(userId) {
            return this.onlines.some(onlineUser => onlineUser.id === userId);
        },
        //修改信息名称
        getsayname(id){
            const student = this.groupMembers.classobj?.find(member => member.uid === id);
            return student?.sayname;
        },
        //获取班级人数
        getnum(){
            return this.groupMembers.classobj?.length;
        },
        //修改班级名称
        updateClassName(){
          //判断
          if(this.groupName === this.groupMembers.cname){
              this.$alert("未修改!");
              return;
          }
        if(this.groupName === ''){
            this.$alert("不能为空!");
            return;
        }
          //修改
          axios.get("cloud-other/createclass/updateClassName?cid=" + this.selectone.id + "&newName=" + this.groupName).then(res=>{
              if(res.data.code === 1){
                  //修改成功，通知班级重新查询班级成员
                  let wssay = {
                      type: "updateClassName",
                      msg: this.selectone.id
                  }
                  const jsonString = JSON.stringify(wssay);
                  this.ws.send(jsonString);
              }else{
                  this.$alert(res.data.msg);
              }
          });
        },
        //修改sayname
        updateSayName(){
        //判断
        if(this.sayname === this.groupMembers.classobj?.find(member => member.uid === this.uid).sayname){
            this.$alert("未修改!");
            return;
        }
        if(this.sayname === ''){
            this.$alert("不能为空!");
            return;
        }
        //修改
        axios.get("cloud-other/classs/updateSayName?uid=" + this.uid + "&cid=" + this.selectone.id + "&newName=" + this.sayname).then(res=>{
            if(res.data.code === 1){
                //修改成功，通知班级重新查询班级成员
                let wssay = {
                    type: "updateClassName",
                    msg: this.selectone.id
                }
                const jsonString = JSON.stringify(wssay);
                this.ws.send(jsonString);
            }else{
                this.$alert(res.data.msg);
            }
        });
        },
        //审核
        passOrNpass(id, uid, num){
        axios.get("cloud-other/classs/passOrNpass?id=" + id + "&num=" + num).then(res=>{
            if(res.data.code === 1){
                //修改成功，通知班级重新查询班级成员
                let wssay = {
                    type: "updateClassName",
                    msg: this.selectone.id
                }
                const jsonString = JSON.stringify(wssay);
                this.ws.send(jsonString);
                this.ws1.send(uid);
            }else{
                this.$alert(res.data.msg);
            }
        });
        },
        //修改群头像
        updateClassImage() {
            // 检查用户名和头像是否都已填写
            if (this.classPic !== '') {
                // 检查是否真的没有做任何修改
                if(this.fileList.length === 0){
                    this.$alert("请选择头像");
                    return;
                }
                if (this.fileList[0]?.url === this.selectone.image) {
                    this.$alert("未修改");
                    return;
                }
                axios.get("cloud-other/createclass/updateClassImage", {
                    params: {
                        cid: this.selectone.id,
                        image: this.classPic
                    }
                }).then(res => {
                    if(res.data.code == 1){
                        //修改成功
                        this.$message(res.data.msg);
                        //修改成功，通知班级重新查询班级成员
                        let wssay = {
                            type: "updateClassName",
                            msg: this.selectone.id
                        }
                        const jsonString = JSON.stringify(wssay);
                        this.ws.send(jsonString);
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            }
        },
        //获取消息
        getSayData(){
          axios.get("cloud-user/chat/getSayData?cid=" + this.selectone.id).then(res=>{
              if(res.data.code === 1){
                  this.msgs = [];
                  let data = res.data.data;
                  for (let i = 0; i < data.length; i++) {
                      this.msgs.push({
                          id: data[i].uid,
                          pic: this.groupMembers.classobj?.find(member => member.uid === data[i].uid).image,
                          sayname: this.groupMembers.classobj?.find(member => member.uid === data[i].uid).sayname,
                          msg: data[i].say
                      })
                  }
              }
          });
        },
        //解散群聊
        exitAll(){
            // 弹出确认框
            if (confirm("确定要解散群聊吗？")) {
                //开始删除
                axios.get("cloud-other/createclass/exitAll?cid="+this.selectone.id).then(res=>{
                    if(res.data.code === 1){
                        this.$message(res.data.msg);
                        this.getclass();
                        let wssay = {
                            type: "updateClassName",
                            msg: this.selectone.id
                        }
                        const jsonString = JSON.stringify(wssay);
                        this.ws.send(jsonString);
                        location.href = "classinfo.html";
                    }
                });
            } else {
                // 如果用户点击了"取消"，则不执行任何操作
                this.$message('取消');
            }
        },
        //退出群聊
        exitOne(){
            // 弹出确认框
            if (confirm("确定要退出群聊吗？")) {
                //开始删除
                axios.get("cloud-other/classs/exitOne?uid="+this.uid+"&cid="+this.selectone.id).then(res=>{
                    if(res.data.code === 1){
                        this.$message(res.data.msg);
                        let wssay = {
                            type: "updateClassName",
                            msg: this.selectone.id
                        }
                        const jsonString = JSON.stringify(wssay);
                        this.ws.send(jsonString);
                        location.href = "classinfo.html";
                    }else{
                        this.$alert();
                    }
                });
            } else {
                // 如果用户点击了"取消"，则不执行任何操作
                this.$message('取消');
            }
        },
        //成员管理
        openClass(){
          this.manage = true;
        },
        //移除成员
        removeOne(obj){
            // 弹出确认框
            if (confirm("确定要退出群聊吗？")) {
                //开始踢出
                axios.get("cloud-other/classs/exitOne?uid="+obj.uid+"&cid="+this.selectone.id).then(res=>{
                    if(res.data.code === 1){
                        this.$message(res.data.msg);
                        let wssay = {
                            type: "updateClassName",
                            msg: this.selectone.id
                        }
                        const jsonString = JSON.stringify(wssay);
                        this.ws.send(jsonString);
                    }else{
                        this.$alert("移除失败");
                    }
                });
            } else {
                // 如果用户点击了"取消"，则不执行任何操作
                this.$message('取消');
            }
        },
        //打开获取试卷弹窗
        getPaperOpen(){
            axios.get("cloud-other/paper/getPaper?uid=" + this.uid).then(res=>{
                this.paper = res.data.data;
            });
            this.paperOne = {};
            this.papers = true;
        },
        //发送试卷
        getPaper(){
          if(Object.keys(this.paperOne).length === 0 || this.paperOne == null){
              this.$alert("请选择试卷！");
              return;
          }
          //开始发送
            let wssay = {
                type: "examination",
                msg: this.paperOne.id
            }
            const jsonString = JSON.stringify(wssay);
            this.ws.send(jsonString);
            //开始存入数据库
            axios.get("cloud-user/chat/insayData", {
                params: {
                    cid: this.selectone.id,
                    uid: this.uid,
                    say: 'examination: ' +this.paperOne.id
                }
            }).then(res=>{
                if(res.data.code === -1){
                    this.$alert(res.data.msg);
                }
            });
        },
        //跳转考试
        getexammax(id){
          if(this.status === 2){
              this.$alert("群主不能作答！");
              return;
          }
          //验证是否是答题时间
            axios.get("cloud-other/paper/untime?id=" + id).then(res=>{
                if(res.data.code === 1){
                    //验证是否作答过
                    axios.get("cloud-other/exam/unone?cid=" + this.selectone.id + "&uid=" + this.uid + "&id=" + id).then(res=>{
                        if(res.data.code === 1){
                            location.href = "exammax.html?cid=" + this.selectone.id + "&id=" + id;
                        }else{
                            this.$alert(res.data.msg);
                        }
                    });
                }else{
                    this.$alert(res.data.msg);
                }
            });
        },
        //新消息滚轮加载
        scrollToBottom() {
            const chatContent = this.$refs.chatContent;
            if (chatContent) {
                chatContent.scrollTop = chatContent.scrollHeight;
            }
        },
        //获取cid
        getcid(){
            var href = window.location.href;
            var url = new URL(href);
            this.cid = url.searchParams.get("id");
            if(url.searchParams.get("id") === null || url.searchParams.get("id") === ''){
                location.href = "myclass.html";
            }
        },
        //查看排行
        viewRankings(pid){
          this.pid = pid;
          //获取信息
          axios.get("cloud-other/exam/getdata?cid=" + this.selectone.id + "&pid=" + pid).then(res=>{
              if(res.data.code === 1){
                  this.exams = res.data.data;
              }
          });
            axios.get("cloud-other/paper/getone?pid=" + pid).then(res=>{
                if(res.data.code === 1){
                    this.paperone = res.data.data;
                }
            });
          this.phb = true;
        },
        //查看试卷  班级班主任可以查看所有学生的试卷详情,个人只能查看个人
        getexamdetail(obj){
          if(this.status === 0 || obj.uid !== this.uid){
              return;
          }
          window.open("lookexam.html?cid=" + this.selectone.id + "&pid=" + this.pid + "&uid=" + this.uid, '_blank');
        },
        sendImage(e){
            var clipboard = e.clipboardData;
            if (clipboard.items[0].type.match(/image/)) {
                let fd = new FormData();
                let blob = clipboard.items[0].getAsFile();
                let nm = "image.jpg"
                fd.append("file",blob,nm);
                axios.post("cloud-other/review/upload",fd).then(res=>{
                    if(res.data.code == 1){
                        let wssay = {
                            type: "say",
                            msg: "file:" + res.data.data
                        }
                        const jsonString = JSON.stringify(wssay);
                        this.ws.send(jsonString);
                        //开始存入数据库
                        axios.get("cloud-user/chat/insayData", {
                            params: {
                                cid: this.selectone.id,
                                uid: this.uid,
                                say: "file:" + res.data.data
                            }
                        }).then(res=>{
                            if(res.data.code === -1){
                                this.$alert(res.data.msg);
                            }
                        });
                        this.msg = "";
                    }
                });
            }
        },
        //打开图片
        openbigpic(obj){
          this.bigimage = obj;
          this.bigpic = true;
        },
        showEmotion() {
            $('#facebox').toggle();
            var msg = document.getElementById("msg");
            msg.style.height = "100px";
        },
        replace_em(str) {
            str = str.replace(/\</g, '<');
            str = str.replace(/\>/g, '>');
            str = str.replace(/\n/g, '<br/>');
            str = str.replace(/\[em_([0-9]*)\]/g, '<img src="arclist/$1.gif" />');
            return str;
        },
        //创建连接
        says1(){
            this.ws1 = new WebSocket("ws://127.0.0.1:8003/classs/" + this.uid + "/" + this.selectone.id + "/" + "1");
            this.ws1.onopen = ()=>{
                console.info("服务器连接成功！");
            }
            this.ws1.onclose = ()=>{
                console.info("服务器断开连接！");
            }
            this.ws1.onmessage = (data)=>{
                let json = data.data;
                let msgInfo = JSON.parse(json);
                //判断是不是修改查询
                if(msgInfo === "刷新"){
                    this.getaudit();
                }
            }
        }
    },
    computed: {

    },
      mounted() {
          this.$nextTick(() => {
              $('.emotion').qqFace({
                  id: 'facebox',
                  assign: 'msg',
                  path: 'arclist/', //表情存放的路径
              });
          });
      },
  });
</script>
</body>

<style>
  .search-input {
    /* 根据需要调整输入框的样式 */
    width: 200px; /* 指定输入框的宽度 */
  }

  .search-button {
    /* 根据需要调整按钮的样式 */
    margin-left: 10px; /* 如果需要，在输入框和按钮之间添加一些垂直间距 */
  }

  .chat-list {
    padding: 10px; /* 内边距，用于增加内容与边框的距离 */
  }

  .chat-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* 可选，添加分隔线 */
  }

  .chat-avatar {
    width: 40px; /* 设置头像的宽度 */
    height: 40px; /* 设置头像的高度 */
    border-radius: 50%; /* 将头像设置为圆形 */
    margin-right: 10px; /* 头像与右侧信息的间距 */
  }

  .chat-info {
    flex-grow: 1; /* 让信息部分占据剩余的空间 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中信息 */
  }

  .chat-name {
    font-weight: bold; /* 设置名称的字体加粗 */
  }

  .chat-status {
    font-size: 15px; /* 设置状态信息的字体大小 */
    color: #999; /* 设置状态信息的字体颜色 */
    margin-top: 2px; /* 状态信息与名称的间距 */
  }

  .online {
    color: green; /* 在线状态使用绿色表示 */
  }

  .offline {
    color: gray; /* 离线状态使用灰色表示 */
  }



  .class-info {
    flex-grow: 1; /* 让班级信息部分占据剩余的空间 */
    display: flex;
    align-items: center; /* 垂直居中 */
  }

  .class-name {
    font-weight: bold; /* 班级名称字体加粗 */
    margin-right: 10px; /* 班级名称与班级人数之间的间距 */
    margin-left: 10px;
  }

  .class-count {
    color: #999; /* 班级人数字体颜色，通常使用灰色 */
    font-size: 14px; /* 班级人数字体大小，可以根据需要调整 */
  }

  .more-options {
    background-color: transparent; /* 按钮背景色透明 */
    border: none; /* 去掉按钮边框 */
    color: #333; /* 按钮字体颜色 */
    font-size: 25px; /* 按钮字体大小，通常使用比正文稍大的字体 */
    cursor: pointer; /* 鼠标悬停时显示为手形，表示可点击 */
    margin-left: auto; /* 让按钮自动靠右对齐 */
    padding: 0 5px; /* 按钮内边距，根据需要调整 */
  }

  .more-options:hover {
    color: #007bff; /* 鼠标悬停时按钮字体颜色变化，通常使用蓝色或其他醒目的颜色 */
  }



  .special-features {
    display: flex;
    gap: 10px; /* 按钮之间的间距 */
      margin-top: 10px;
  }

  .feature-button {
    padding: 5px 10px; /* 内边距 */
    background-color: #007bff; /* 背景色 */
    color: #fff; /* 字体颜色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时显示为手形 */
  }

  .feature-button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景色变化 */
  }

  .chat-content {
      flex: auto;
      box-sizing: border-box;
    padding: 10px; /* 内边距 */
    background-color: #f9f9f9; /* 背景色，与整体背景有所区分 */
    border-radius: 4px; /* 圆角 */
    overflow-y: auto; /* 允许垂直滚动，如果内容超出区域高度 */
    max-height: calc(100vh - 130px); /* 限制最大高度，留出特色功能和聊天输入的空间 */
  }

  .chat-message {
      flex: none;
  }

  .chat-input {
    display: flex;
    margin-top: 10px; /* 与聊天内容之间的间距 */
    background-color: #f1f1f1; /* 背景色 */
    padding: 5px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
  }

  .input-field {
    flex-grow: 1; /* 让输入框占据剩余的空间 */
    padding: 5px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
  }

  .send-button {
    margin-left: 10px; /* 与输入框之间的间距 */
    padding: 5px 10px; /* 内边距 */
    background-color: #007bff; /* 背景色 */
    color: #fff; /* 字体颜色 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时显示为手形 */
  }

  .send-button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景色变化 */
  }


  .chat-avatar {
    border-radius: 50%; /* 圆形头像 */
    width: 40px; /* 头像宽度 */
    height: 40px; /* 头像高度 */
    margin-right: 10px; /* 头像和文本之间的间距 */
  }

  .chat-text {
    background-color: #f0f0f0; /* 文本背景色 */
    padding: 8px; /* 文本内边距 */
    border-radius: 8px; /* 文本圆角 */
    max-width: 300px; /* 文本最大宽度 */
    word-wrap: break-word; /* 长单词换行 */
  }

  /*聊天侧栏头像*/
  .card {
    border: 1px solid #ddd; /* 边框颜色 */
    border-radius: 8px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    width: 300px; /* 宽度，可以根据需要调整 */
    margin: 20px auto; /* 外边距，居中显示 */
    padding: 16px; /* 内边距 */
    background-color: #fff; /* 背景颜色 */
  }

  .card-avatar {
    float: left; /* 左浮动 */
    width: 80px; /* 头像宽度 */
    height: 80px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    overflow: hidden; /* 隐藏溢出内容 */
    margin-right: 16px; /* 与内容之间的间距 */
  }

  .card-avatar img {
    width: 100%; /* 图片宽度填满容器 */
    height: auto; /* 图片高度自动调整 */
  }

  .card-content {
    overflow: hidden; /* 清除浮动 */
  }

  .card-title {
    margin: 0; /* 移除标题的默认外边距 */
    font-size: 18px; /* 标题字体大小 */
    font-weight: bold; /* 标题字体加粗 */
  }

  .card-invite-code {
    margin: 8px 0 0; /* 邀请码的上外边距 */
    font-size: 14px; /* 邀请码字体大小 */
    color: #888; /* 邀请码字体颜色 */
  }

  /*群成员*/

  .group-members-container {
      background-color: #f9f9f9; /* 背景色 */
      padding: 16px; /* 内边距 */
      border: 1px solid #ddd; /* 边框 */
      border-radius: 8px; /* 圆角 */
      max-height: 400px; /* 最大高度，可以根据需要调整 */
      overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 盒子阴影，增加立体感 */
  }

  .group-member {
      display: flex;
      align-items: center;
      margin-bottom: 12px; /* 每个成员项之间的间距 */
  }

  .member-avatar {
      width: 48px; /* 头像宽度 */
      height: 48px; /* 头像高度 */
      border-radius: 50%; /* 圆形头像 */
      margin-right: 12px; /* 头像与名称之间的间距 */
  }

  .member-name {
      font-size: 16px; /* 名称字体大小 */
      color: #333; /* 名称字体颜色 */
  }

  /*编辑名称*/
  .updatecname {
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f9f9f9;
      max-width: 400px;
      margin: 0 auto;
      text-align: center;
      margin-top: 20px;
  }

  .editable-group-name {
      display: flex;
      align-items: center;
  }

  .group-name-input {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      flex: 1; /* 使输入框占据剩余空间 */
      margin-right: 10px; /* 为按钮留出空间 */
  }


  .change-button {
      /* 按钮样式... */
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 4px;
      background-color: #409EFF; /* Element UI的默认主色调 */
      color: white;
  }

  .change-button:hover {
      background-color: #66b1ff; /* 鼠标悬停时的背景色 */
  }

  /*审核*/
  .group-member {
      display: flex;
      align-items: center; /* 垂直居中 */
      margin-bottom: 10px; /* 可选：为每个成员添加一些垂直间距 */
  }

  .member-info {
      flex: 1; /* 占据剩余空间，但允许收缩 */
      display: flex;
      align-items: center; /* 垂直居中 */
  }

  .member-avatar {
      margin-right: 10px; /* 头像和名称之间添加一些间距 */
  }

  .member-actions {
      margin-left: auto; /* 将此部分推到右侧 */
      display: flex;
      align-items: center; /* 垂直居中 */
      gap: 10px; /* 可选：在动作之间添加一些间距 */
  }
  .online-status {
      margin-top: 5px;
      font-size: 12px;
      color: #333;
  }
  .online-status span {
      display: block;
  }
  .online-status .online {
      color: green;
  }
  .online-status .offline {
      color: red;
  }

  .send > * {
      float: right;
  }

  .recv > * {
      float: left;
  }

  .send, .recv {
      clear: both;
      padding: 5px 0px;
  }

  /*退出班级*/
  .cardexit {
      display: flex; /* 使用Flexbox布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      width: 100%; /* 卡片宽度，可以根据需要调整 */
      height: 20px; /* 卡片高度，可以根据需要调整 */
      background-color: #fff; /* 卡片背景颜色 */
      border: 1px solid #ddd; /* 卡片边框 */
      border-radius: 8px; /* 卡片圆角 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 卡片阴影，增加立体感 */
      padding: 20px; /* 内边距，确保按钮不会紧贴边框 */
      text-align: center; /* 文本对齐，虽然在这个例子中不是必需的，但可以用于其他文本内容 */
      position: relative; /* 相对定位，用于后续可能的绝对定位元素 */
      margin-top: 20px;
  }

  .send-button {
      background-color: #4CAF50; /* 按钮背景颜色 */
      border: none; /* 去掉按钮边框 */
      color: white; /* 按钮文字颜色 */
      padding: 10px 20px; /* 按钮内边距 */
      font-size: 16px; /* 按钮文字大小 */
      border-radius: 4px; /* 按钮圆角 */
      cursor: pointer; /* 鼠标悬停时显示手型 */
      transition: background-color 0.3s; /* 背景颜色过渡效果 */
  }

  .send-button:hover {
      background-color: #45a049; /* 鼠标悬停时按钮背景颜色 */
  }

  .send-button-disband {
      background-color: #f44336; /* 解散群聊按钮背景颜色 */
  }

  .send-button-disband:hover {
      background-color: #da190b; /* 解散群聊按钮鼠标悬停时背景颜色 */
  }

  .blue-background{
      background-color: #3a8ee6;
  }

  /*聊天*/
  .exam-container {
      width: 300px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      overflow: hidden;
      background-color: #ffffff;
  }

  .exam {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
  }

  .exam-header {
      background-color: #007aff;
      color: #ffffff;
      padding: 10px 0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
  }

  .exam-content {
      margin-top: 20px;
      color: #333333;
  }

  .exam-footer {
      margin-top: 20px;
  }

  .exam-button {
      width: 100%;
      padding: 10px 0;
      background-color: #007aff;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
  }

  .exam-button:hover {
      background-color: #005bb5;
  }

  .clicked {
      background-color: #d3d3d3; /* 模拟点击后的效果，比如变灰 */
      pointer-events: none; /* 禁止再次点击 */
  }
</style>

</html>